<template>
    <div class="message-list settle-sub-box">
        <div class="cont">
            <div class="list" v-for="(item,index) in notices" :key="index">
                <div class="state" :class="{'un-visit': item.visitState==0}">{{visitStates[item.visitState]}}</div>
                <div class="name">{{item.name}}</div>
                <div class="time lg">探视时间 {{item.visitTime}}</div>
            </div>
            <infinite-loading @infinite="infiniteHandler" spinner="spiral" :distance="100">
                <div slot="no-more"></div>
                <div slot="no-results"></div>
                <div slot="error" slot-scope="{ trigger }">
                </div>
            </infinite-loading>
            <div class="empty" v-if="!notices[0]">暂无探视</div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                notices: [],
                index: 1,
                visitStates: ['未探视', '探视中', '已探视', '探视中', '已过期', '待确认']
            }
        },
        mounted() {
            this.$emit('footerHide')
        },
        methods: {
            infiniteHandler($state) {
                this.$http.get('/patientAllVisit', {
                    size: 15,
                    current: this.index || 1,
                    patientId: this.$route.query.id
                }).then(result => {
                    if (result.success) {
                        this.notices.push(...result.data.records)
                        if (result.data.pages <= result.data.current) {
                            $state.loaded()
                            $state.complete()
                        } else {
                            this.index += 1
                            $state.loaded()
                        }
                    } else {
                        $state.loaded()
                        $state.complete()
                    }
                }).catch(() => {
                    $state.error()
                })
            }
        },
        components: {}
    }
</script>

<style scoped lang="less">
    .message-list {
        background-color: #FBFBFB;
    }

    .cont {
        padding: .3rem;
        height: 100%;
    }

    .list {
        padding: .3rem .2rem;
        box-shadow: 0 0 5px -1px rgba(0, 0, 0, .1);
        border-radius: 3px;
        display: flex;
        align-items: center;
        line-height: 1;
        margin-bottom: .2rem;
        background-color: #fff;

        .state {
            padding: .06rem;
            background-color: #598CDA;
            color: #fff;
            border-radius: 3px;
            margin-right: .2rem;
            font-size: .2rem;
            text-align: center;

            &.un-visit, &.state0 {
                background-color: #DA6959;
            }
        }

        .time {
            flex: 1;
            text-align: right;
            margin-left: .2rem;
            color: #999;
            font-size: .24rem;
        }

        &:last-child {
            margin-bottom: 0;
        }
    }

    .empty {
        text-align: center;
        padding-top: .5rem;
        color: #999;
    }
</style>
